<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>成绩录入</title>
    <link rel="stylesheet" th:href="@{/bootstrap/bootstrap-3.3.7-dist/css/bootstrap.min.css}"/>
    <script th:src="@{/js/jquery-3.2.1.min.js}"></script>
    <style>

    </style>
</head>
<body>
    <div class="container-fluid">
        <ol class="breadcrumb nav-top">
            <li><a th:href="@{~/router/index.html}" target="main">首页</a></li>
            <li class="active">成绩录入</li>
        </ol>
        <div style="height: 400px;overflow-x: scroll">
            <table class="table table-bordered" >
                <tr>
                    <td>学&nbsp;号</td>
                    <td>姓&nbsp;名</td>
                    <td>考试成绩</td>
                    <td>考勤成绩</td>
                    <td>最终成绩</td>
                    <td>录&nbsp;入</td>
                </tr>
                <tr class="p" th:each="student,state : ${studentsList}">
                    <input type="hidden" th:value="${student.ocourse}" th:id="${'courseId'+state.index}"/>
                    <td th:text="${student.sid}" th:id="sid+${state.index}"></td>
                    <td th:text="${student.sname}" th:id="sname+${state.index}"></td>
                    <td><input class="score" type="text" th:id="${'score'+state.index}"/></td>
                    <td><input class="work" type="text" th:id="${'work'+state.index}"/></td>
                    <td><span class="total" th:id="${'total'+state.index}"></span></td>
                    <td>
                        <button th:id="${'btn'+state.index}" th:onclick="inscore([[${state.index}]]);">录入</button>
                        <button th:id="${'btn'+state.index}" th:onclick="updatescore([[${state.index}]]);">修改</button>
                    </td>
                </tr>
            </table>
        </div>

        <script>
            $(function(){
                $.ajax({
                    url:"/score/getAllCurricus",
                    success:function(data){
                        console.log(data);
                       $.each(data,function(index,value){
                           console.log(index+"**"+value.stuId+"**"+value.score+"**"+value.work);
                           $("#score"+index).val(value.score);
                           $("#work"+index).val(value.work);
                           $("#total"+index).text((parseFloat(value.score)*0.85+parseFloat(value.work)*0.15).toFixed(2));

                           if($("#score"+index).val()!=""){
                               $("#score"+index).attr("disabled","disabled");
                           }
                           if($("#work"+index).val()!=""){
                               $("#work"+index).attr("disabled","disabled");
                               $("#btn"+index).attr("disabled","disabled");
                           }
                       })
                    }
                });
            })
            // alert($)
            function inscore(state){
                const courseId = $("#courseId"+state).val();
                const stuId = $("#sid"+state).text();
                const sname = $("#sname"+state).text();
                const score = $("#score"+state).val();
                const work = $("#work"+state).val();
               if(score==null&&work==null){
                    return;
               }
               $.ajax({
                   url:'/score/inScore',
                   data:{"stuId":stuId,"stuName":sname,"score":score,"work":work,"courseId":courseId},
                   success:function(data){
                        if(data==""){
                            const  score = $("#score"+state).val();
                            const  work = $("#work"+state).val();
                            $("#score"+state).attr("disabled","disabled");
                            $("#work"+state).attr("disabled","disabled");
                            $("#btn"+state).attr("disabled","disabled");
                            $("#total"+state).text((parseFloat(score)*0.85+parseFloat(work)*0.15).toFixed(2));
                        }else{
                            console.log(data)
                            alert("该同学成绩已经录入")
                            $("#score"+state).val(data.score);
                            $("#work"+state).val(data.work);
                            $("#total"+state).text((parseFloat(data.score)*0.85+parseFloat(data.work)*0.15).toFixed(2));
                        }
                   }
               })
            }
            var flag = 0;
            function  updatescore(index) {
                const courseId = $("#courseId"+index).val();
                const stuId = $("#sid"+index).text();
                const score = $("#score"+index).val();
                const work = $("#work"+index).val();
                if(flag==1){
                    $.ajax({
                        url:"/score/updateScore",
                        data:{"stuId":stuId,"score":score,"work":work,"courseId":courseId},
                        success:function(data){
                            if(data=="success"){
                                alert("修改成功");
                                $("#score"+index).attr("disabled","disabled");
                                $("#work"+index).attr("disabled","disabled");
                                $("#btn"+index).attr("disabled","disabled");
                                const score = $("#score"+index).val();
                                const work = $("#work"+index).val();
                                $("#total"+index).text((parseFloat(score)*0.85+parseFloat(work)*0.15).toFixed(2));
                            };
                            flag=0;
                        }
                    })
                }
                if(score==""||work==""){
                        return;
                }else{
                    $("#score"+index).removeAttr("disabled");
                    $("#work"+index).removeAttr("disabled");
                    flag=1;
                }

            }
        </script>
        <!--<form class="form-horizontal">-->
            <!--<div class="form-group">-->
                <!--<label for="curriculum" class="col-sm-2 control-label">课程</label>-->
                <!--<div class="col-sm-10">-->
                    <!--<input type="text" class="form-control" id="curriculum" placeholder="课程">-->
                <!--</div>-->
            <!--</div>-->
            <!--<div class="form-group">-->
                <!--<label for="inputPassword3" class="col-sm-2 control-label">Password</label>-->
                <!--<div class="col-sm-10">-->
                    <!--<input type="password" class="form-control" id="inputPassword3" placeholder="Password">-->
                <!--</div>-->
            <!--</div>-->

            <!--<div class="form-group">-->
                <!--<div class="col-sm-offset-2 col-sm-10">-->
                    <!--<button type="submit" class="btn btn-default">录入</button>-->
                <!--</div>-->
            <!--</div>-->
        <!--</form>-->


    </div>
</body>
</html>